<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../css/pet-store-plus.css">
  <link rel="stylesheet" href="../css/bootstrap.css">
<!--  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"-->
<!--        integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">-->
<!--  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">-->
<!--  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>-->
  <script src="/js/chart.js"></script>
  <title>数据管理</title>
</head>
<body>
<div th:replace="seller_commom"></div>

<div class="content" id="content">

    <div class="revenue">
      <p  class="text-left" style="color: white;font-weight: bold;">总收入</p>
      <p  th:text="${totalIncome}+'元'" style="font-size: xxx-large;">10000元</p>
    </div>
  <div class="revenue">
    <p class="text-left" style="color: white;font-weight: bold;">总退款</p>
    <p class="text-left" th:text="${totalOutcome}+'元'" style="font-size: xxx-large">10000元</p>
  </div>
  <div class="revenue">
    <p class="text-left" style="color: white;font-weight: bold;display: block;">总订单</p>
    <p class="text-left" th:text="${orderNumber}+'个'" style="font-size: xxx-large;display: block;";>10000个</p>
  </div>
  <div class="revenue">
    <p class="text-left" style="color: white;font-weight: bold;">总浏览量</p>
    <p class="text-left" th:text="${viewsNumber}+'次'" style="font-size: xxx-large">10000次</p>
  </div>
  <div class="Productlist">
    <table th:if="${itemListBySale!=null}">
      <thead>
      <td>销量排行榜</td>
      </thead>
          <tr th:each="item:${itemListBySale}" style="height: 40px">
            <td th:text="${item.key}"></td>
            <td th:text="${item.value}"></td>
          </tr>
    </table>
  </div>

  <div class="chart" >
<!--      <p style="color: white;font-weight: bold; margin-left: 40px; font-size: xx-large;margin-top: 20px;" > 销量统计</p>-->
<!--    <h2 style="font-size: 20px; /* 设置字体大小为20像素 */  color: #54c07a;width: 10%;margin-left: 20px">销量统计</h2>-->
    <canvas id="myChart">
    </canvas>
  </div>

  <script th:inline="javascript">

    window.onload=function (){
        const ctx = document.getElementById('myChart');
      var monthIncomeMap = /*[[${monthIncomeMap}]]*/ '{}';
      console.log(monthIncomeMap);
      var chartData={months:[],salesDatas:[]};

      for(var key in monthIncomeMap){
        chartData.months.push(key);
        chartData.salesDatas.push(monthIncomeMap[key]);
      }
      console.log(chartData);

      // ctx.width = 180; // 设置宽度为300px
      // ctx.height = 100;
      ctx.style.width = '220px';
      ctx.style.height = '130px';

      // 创建渐变填充色
      const gradient = ctx.getContext('2d').createLinearGradient(0, 0, 0, 400);
      gradient.addColorStop(0, 'rgba(193, 255, 193, 0.6)'); // 起始颜色，透明度为0.6
      gradient.addColorStop(1, 'rgba(0, 238, 118, 0.05)'); // 结束颜色，完全透明
      new Chart(ctx, {
        type: 'line',
        data: {
          labels: chartData.months,
          datasets: [{
            label: '销量',
            data: chartData.salesDatas,
            borderWidth: 2,
            backgroundColor: gradient ,// 设置渐变填充色, // 设置背景颜色
            borderColor: '#00EE76', // 设置边框颜色
            fill: 'origin' // 设置填充起点为原点
          }]
        },
        options: {
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
    };

  </script>
</div>

</body>
</html>